<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<style>
		.top{
			vertical-align: top;
			width: 50%;
		}
		.bold{
			font-weight: bold;
		}
	</style>
	<h:panelGrid columns="2" columnClasses="top,top" width="60%">
		<h:form>
			<rich:tree id="tree" nodeType="#{node.type}" var="node"
				value="#{treeBean.rootNodes}" toggleType="client"
				selectionType="ajax"
				selectionChangeListener="#{treeBean.selectionChanged}">
				<rich:treeNode type="country">
				#{node.name}
			</rich:treeNode>
				<rich:treeNode type="company" icon="/images/tree/disc.gif">
				#{node.name}
			</rich:treeNode>
				<rich:treeNode type="cd" icon="/images/tree/song.gif">
				#{node.artist} - #{node.name} - #{node.year}
			</rich:treeNode>
			</rich:tree>
		</h:form>
		<a4j:outputPanel ajaxRendered="true" layout="block">
			<rich:panel header="Current Selection"
				rendered="#{not empty treeBean.currentSelection}">
				<h:outputText value="Name:" />
				<h:outputText value="#{treeBean.currentSelection.name}" />
				<h:panelGroup rendered="#{treeBean.currentSelection.leaf}">
					<fieldset><legend>Details</legend> <h:panelGrid columnClasses="bold"
						columns="2">
						<h:outputText value="Country:" />
						<h:outputText value="#{treeBean.currentSelection.company.country}" />
						<h:outputText value="Company:" />
						<h:outputText value="#{treeBean.currentSelection.company}" />
						<h:outputText value="Artist:" />
						<h:outputText value="#{treeBean.currentSelection.artist}" />
						<h:outputText value="Price:" />
						<h:outputText value="#{treeBean.currentSelection.price}">
							<f:convertNumber type="currency" currencyCode="USD"/>
						</h:outputText>
						<h:outputText value="Year:" />
						<h:outputText value="#{treeBean.currentSelection.year}" />
					</h:panelGrid></fieldset>
				</h:panelGroup>
			</rich:panel>
		</a4j:outputPanel>
	</h:panelGrid>
</ui:composition>